import React, { useEffect } from 'react';
import { getCityDataAsync } from './store/actionCreators';
import { useSelector, useDispatch } from "react-redux";
import {useHistory} from "react-router-dom";
const Index = () => {
  const cityList = useSelector((state) => state.cityReducer.cityList);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getCityDataAsync())
    // eslint-disable-next-line
  }, [])
  console.log(cityList);
  const history=useHistory();
  const fn=(name)=>{
    return ()=>{
      console.log(name);
      localStorage.setItem("city",name);
      history.goBack();
    }
  }
  return (
    <>

      {
        cityList.map((item, index) => <dl key={index}>
          <dt>{item.prefix}</dt>
          {
            item.cities.map(el => <dd key={el.cityId} onClick={fn(el.name)}>{el.name}</dd>)
          }
        </dl>
        )
      }


    </>
  );
}

export default Index;

